<template>
    <div class="tab">
        <ul>
            <!-- exact-active-class 当路由被精确匹配到时添加的类名
                active-class当路由被匹配到时天加的类名
             -->
            <router-link exact-active-class="active" tag="li" to="/-1">全部</router-link>
            <router-link exact-active-class="active" tag="li" to="/0">未付款</router-link>
            <router-link exact-active-class="active" tag="li" to="/1">已付款</router-link>
            <router-link exact-active-class="active" tag="li" to="/2">未发货</router-link>
            <router-link exact-active-class="active" tag="li" to="/3">已完成</router-link>
        </ul>
    </div>
</template>

<script>
export default {
    name: '',
    data() { 
        return {

        }
    },
    created() {

    },
    methods:{

    },
}
</script>

<style scoped lang="scss">
.tab {
    height: 60px;
    background-color: green;
    color: #fff;
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-around;
        height: 100%;
        align-items: center;
        .active {
            color: blue;
        }
    }
}
</style>